<template>
  <div style="padding-left: 10px;height:93vh">
    <mavon-editor v-model="value" :subfield-options="{theme: 'global'}" ref="md" style="height: 100%;width:1010px;overflow:scroll" @imgAdd="addFile" @imgDel="delImag" :toolbars="toolbars"/>
    <div style="margin-left: 85%;margin-top:2px">
      <el-button type="success" @click="dialogFormVisible=true">提交</el-button>
    </div>
    
    <!-- 嵌入表单 -->
    <el-dialog title="博客新增" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="博客名称" label-width="120px">
          <el-input v-model="form.name" style="width: 240px;" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="博客类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" clearable placeholder="请选择">
            <el-option
              v-for="type in types"
              :key="type.id"
              :label="type.name"
              :value="type.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="博客标签" :label-width="formLabelWidth">
          <el-select
            v-model="form.tags"
            multiple
            collapse-tags
            style="margin-left: 20px;"
            placeholder="请选择">
            <el-option
              v-for="tag in tags"
              :key="tag.id"
              :label="tag.name"
              :value="tag.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="博客封面" :label-width="formLabelWidth">
          <el-upload action="http://localhost:8081/api/files/upload" :on-success="successUpload">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label-width="60px">
          <el-checkbox v-model="form.recommend">推荐</el-checkbox>    
          <!-- <el-checkbox v-model="form.published">发表</el-checkbox>     -->
          <el-checkbox v-model="form.shareStatement">分享</el-checkbox>    
          <el-checkbox v-model="form.commentTabled">评论</el-checkbox>    
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="success" @click="Submit">发 布</el-button>
        <el-button type="primary" @click="Save">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
import request from '../../utils/request'
import jsCookie from 'js-cookie'
export default {
    name:'BlogAdd',
    data(){
      return{
          toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: false, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        },
        value:'',
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth:'120px',
        form:{
          value:'',
          flag:'',
          name:'',
          type:'',
          tags:[],
          published:false,
          shareStatement:false,
          commentTabled:false,
          recommend:true,
          userId:''
        },
        types:[],
        tags:[]
      }
    },
    created(){
      request.get('/admin/tags').then((res) => {
        console.log(res)
        this.tags = res.data.list
      })
      request.get('/admin/types').then((res) => {
        console.log(res)
        this.types = res.data.list
      })
      this.$on('admin',this.getAdmin)
    },
    methods:{
      getAdmin(e){
        console.log("自组件获得的admin")
        console.log(e)
      },
      Submit(){
        this.form.value = this.value
        this.form.userId = jsCookie.get("user")

        this.form.published = true
        console.log(this.form)

        request.post('/admin/addBlog',this.form).then((res) => {
          console.log(res)
        })
        
        this.dialogFormVisible=false
        this.form = {}
        this.value=''
      },
      Save(){
        this.form.value = this.value
        console.log(this.form)
        
        request.post('/admin/addBlog',this.form).then((res) => {
          console.log(res)
        })

        this.dialogFormVisible=false
        this.form = {}
        this.value=''
      },
      successUpload(res){
        // 返回的是成功之后的返回值
        console.log(res)
        this.form.flag = res.msg
      },
      addFile(filename,file){
        console.log(filename,file)
        var formdata = new FormData()
        formdata.append('file', file)
        request.post('/files/uploadImage',formdata).then((res) => {
          console.log(res)
          // this.$refs.md.$img2Url(pos,res.data)
          this.$nextTick(() => {
            console.log(this.$refs.md)
            this.$refs.md.$img2Url(filename,res.data)
          });
        })
      },
      delImag(flag){

      }
    }
}
</script>

<style>

</style>